<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ckplayer</title>
    <link type="text/css" rel="stylesheet" href="./../ckplayer/css/ckplayer.css" />
    <script type="text/javascript" src="./../ckplayer/js/ckplayer.js" charset="UTF-8"></script>
    <script type="text/javascript" src="./../jquery/dist/jquery.min.js" charset="UTF-8"></script>
</head>

<body>
    <div class="option">
        <span>设置播放器个数</span>
        <input type="number" max="4" min="1" style="height: 1.5rem; width: 4rem; margin-left: 2rem;" id="row"
            value="2">行
        <input type="number" max="6" min="1" style="height: 1.5rem; width: 4rem; margin-left: 2rem;" id="col"
            value="1">列
        <button style="height: 1.5rem; width: 4rem; margin-left: 2rem; cursor: pointer;" id="setCount"
            onclick="setCount()">确定</button>
    </div>
    <div class="video" id="videoDiv" style="width: 100%; height: calc(100% - 4rem); position: relative;"></div>
</body>

<script>

    // 默认提供测试的视频播放地址
    var urlList = [
        "http://172.17.143.60:11111/1_255___225.1.2.1_6001?progid=1",
        "http://172.17.143.60:11112/1_255___239.253.7.225_51097?progid=1",
        // "http://172.17.13.166:20011/realtime/1008-1",
        // "http://172.17.13.166:20011/realtime/1008-2",
        // "http://172.17.13.166:20011/realtime/1008-3",
        // "http://172.17.13.166:20011/realtime/1008-4",
        // "http://172.17.13.166:20011/realtime/1008-5",
        // "http://172.17.13.166:20011/realtime/1008-6",
        // "http://172.17.13.155:20011/realtime/1"
    ]

    // var urlList = [
    //     "http://172.17.13.95:38082/mp4/20230412173734.ts"
    // ]

    // 行数
    var row = 2
    // 列数
    var col = 1
    // 播放器集合
    var playerMap = {}
    // 是否加载上方url直接播放
    var loadAndPlayFLAG = false

    // 根据行列数设置播放器个数
    function setCount() {
        row = parseInt($("#row").val());
        col = parseInt($("#col").val());
        // 先清理已有的播放器节点
        removeVideoDom()
        // 重新创建播放器节点
        createVideoDom()
    }

    // 清理已有的播放器节点
    function removeVideoDom() {
        for (var key in playerMap) {
            playerMap[key].pause()
            playerMap[key].remove()
        }
        $("#videoDiv").empty()
    }

    // 重新创建播放器节点
    function createVideoDom() {
        var container_Height = $("#videoDiv").height()
        var container_width = $("#videoDiv").width()
        var index = 0;
        for (var i = 0; i < row; i++) {
            for (var j = 0; j < col; j++) {
                // 拼装播放器Dom节点
                var dom_Html = ""
                dom_Html += `<div class="videoItem" style="height: ${container_Height / row - 20}px; width: ${container_width / col - 20}px; ">`
                dom_Html += `<div id="video_${i}_${j}" class="video_p"></div>`
                dom_Html += `<input class="video_url" placeholder="输入播放地址" value="${urlList[index] ? urlList[index] : ''}"/>`
                dom_Html += `<button class="video_btn" onClick="clickPlay('video_${i}_${j}')">播放</button>`
                dom_Html += `</div>`
                $("#videoDiv").append(dom_Html)

                if (loadAndPlayFLAG) {
                    setTimeout((i, j) => {
                        clickPlay(`video_${i}_${j}`)
                    }, 1000, i, j);
                }

                index += 1;
            }
        }
    }

    // 点击播放
    function clickPlay(dom) {
        var url = $(`#${dom}`).next().val()
        var videoObject = {
            container: `#${dom}`,
            plug: 'mpegts.js', //使用mpeg解析播放ts流
            autoplay: true, //自动播放
            live: true, //直播
            volume: 0, //音量
            recoveryVolumeEnable: false,// 用于控制是否需要在播放时恢复音量。注意: 此参数是博汇研发自行扩展的参数

            menu: [
                {
                    title: '播放地址',
                    underline: true
                },
                {
                    title: url,
                    underline: true
                }
            ]
        };
        videoObject.video = url
        var player = new ckplayer(videoObject)
        playerMap[dom] = player
    }

    setTimeout(function () {
        $("#row").val = row
        $("#col").val = col
        createVideoDom()
    }, 100)

</script>

<style>
    html,
    body {
        height: 100%;
        width: 100%;
        margin: 0;
        overflow: hidden;
    }

    .option {
        height: 3rem;
        width: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #2690c1;
        background-color: rgb(196, 254, 235);
    }

    .videoItem {
        position: relative;
        float: left;
        margin: 10px;
    }

    .video_p {
        position: relative;
        width: 100%;
        height: calc(100% - 1.5rem);
        background-color: rgb(243, 242, 240);
    }

    .video_url {
        position: relative;
        width: calc(100% - 4rem);
        height: 1.5rem;
        margin-right: .5rem;
        float: left;
    }

    .video_btn {
        position: relative;
        float: left;
        width: 3rem;
        height: 1.5rem;
        cursor: pointer;
        margin-top: .2rem;
    }
</style>

</html>